<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="球员名称">
        <el-input v-model="player.name"/>
      </el-form-item>
      <el-form-item label="球员国籍">
        <el-input v-model="player.nation"/>
      </el-form-item>
      <el-form-item label="球员位置">
        <el-input v-model="player.position"/>
      </el-form-item>
      <el-form-item label="国家队号码">
        <el-input v-model="player.number"/>
      </el-form-item>

      <!-- 讲师头像：TODO -->

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import player from '@/api/dbwork/player'
  export default {
    data(){
      return{
        player:{},
        saveBtnDisabled:false, //防止重复提交按钮
      }
    },
    created() {
      // 由于本界面是修改和添加公用的，通过判断id是否有值来确定到底是修改还是添加
      if(this.$route.params&&this.$route.params.id){
        const  id = this.$route.params.id
        this.getPlayer(id)
      }
    },
    methods:{
      saveOrUpdate(){
        if(!this.player.id){
          this.savePlayer()
        }else{
          this.update(player)
        }

      },
      savePlayer(){
          player.addPlayer(this.player)
            .then(response => {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              // 回到主页面,路由跳转
              this.$router.push({path:'/player/table'})
            })
      },
      getPlayer(id){
        player.getPlayerById(id)
            .then(response => {
                this.player = response.data.player
            })
      },
      update(){
        player.updatePlayer(this.player)
            .then(response=>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$router.push({path:'/player/table'})
            })
      }
    }
  }
</script>
